﻿//全局数组
var arrId = new Array();
var arrValue = new Array();
var divHTML = "";
var idsAndValues = "";
var tempCheckOneArr = new Array();


//Ajax请求回来的data格式   0,1,2,3|a,b,c,d
function checkboxSelected() {
    this.el1 = $("<div style='width:200px;height:210px; position:relative;'></div>");
    this.el2 = $("<div style='width:200px; height:20px;'><input id='txtSearch' type='text' style='width:198px; height:18px; border:#ccc solid 1px;' /></div>");
    this.el3 = $("<div id='showinfo' style='width:200px; height:188px; border:#CCC solid 1px; left:0; top:20px; position:absolute;display:none'></div>");

    this.show = function () {
        this.el1.append(this.el2);
        this.el1.append(this.el3);
        $("body").append(this.el1);
        //初始化数据
        this.AjaxLoad("requestData", "AjaxRequestPage/testAjax.aspx");
        //形成table
        this.joinhtml(arrId, arrValue);
    }

    this.SetClassForEl1 = function (css) {
        this.el1.attr("class", css);
    }

    this.AjaxLoad = function (tag,ajaxUrl) {
        $.ajax({
            type: "post",
            async: false,
            url: ajaxUrl,
            data: { tag: tag, ran: Math.random() },
            success: function (data) {
                //data格式   0,1,2,3|a,b,c,d
                if (data != "") {
                    arrId = data.split('|')[0].split(',');
                    arrValue = data.split('|')[1].split(',');
                }
                else {
                    alert("请求服务器失败!");
                }
            },
            failure: function (errorCode, errorMessage) {
                if (errorCode == -1) {
                    alert(errorMessage);
                }
                else {
                    alert(errorMessage);
                }
            }
        });
    }

    this.joinhtml = function (arr1, arr2) {
        var html = "";
        html = "<table id='tab1'><tr><td><input type='checkbox' id='checkAll'/></td><td>全选</td></tr>";
        for (var i = 0; i < arr1.length; i++) {
            html += "<tr>";
            html += "<td>";
            html += "<input type='checkbox' name='checkone' id='" + arr1[i] + "' rel='" + arr2[i] + "'/>";
            html += "</td>";
            html += "<td>";
            html += arr2[i];
            html += "</td>";
            html += "</tr>";
        }
        html += "<tr><td colspan='2' align='right'><input type='button' value='确定' id='btnOK' onclick='btnOKClick();'/><input type='button' value='取消' id='btnCan' onclick='btnCanClick();'/></td></tr>";
        html += "</table>";
        divHTML = html;
    }

    this.el2.children().click(function () {
        $("#showinfo").html(divHTML);

        $("#tab1 tr td input[type=checkbox][name=checkone]").each(function () {
            tempCheckOneArr.push($(this));
        })
        var temp = new ControlCheckBox($("#checkAll"), tempCheckOneArr);
        temp.CheckAll();
        temp.CheckOne();
        $("#showinfo").css("display", "block");
    })
}

function btnOKClick() {
    var tempid = "";
    var tempval = "";
    var num = 0;
    $("#tab1 tr td input[type=checkbox][name=checkone]").each(function () {
        if (this.checked) {
            tempid += $(this).attr("id") + ",";
            tempval += $(this).attr("rel") + ",";
            num++;
        }
    })
    if (num == 0) {
        alert("请至少选择一项!");
        return;
    }
    tempid = tempid.substring(0, tempid.lastIndexOf(','));
    tempval = tempval.substring(0, tempval.lastIndexOf(','));

    //这里就可以得到已选中的项的id和value,可以发送ajax请求道服务器或者其他的操作
    alert(tempid + "--" + tempval);
    $("#showinfo").css("display", "none");
}

function btnCanClick() {
    $("#showinfo").css("display", "none");
}

